<template>
  <div>
    <el-button type="primary" @click="showDialog('dialog1')" icon="el-icon-plus"
    >新增</el-button
    >
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form
          :model="ruleForm"
          :label-position="labelPosition"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="region">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="region">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="分类图片" prop="type">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
        >提交</el-button
        >
      </span>
    </el-dialog>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column prop="date" label="分类名称" width="350" align="center">
      </el-table-column>
      <el-table-column prop="name" label="排序" align="center">
      </el-table-column>
      <el-table-column prop="address" label="服务费率" align="center">
      </el-table-column>
      <el-table-column prop="address" label="分类图片" align="center">
      </el-table-column>
      <el-table-column prop="address" label="是否显示" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.switchValue"
            active-color="#1289FF"
            inactive-color="#ccc"
            @change="handleSwitchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-delete"
          >删除</el-button
          >
          <el-button @click="handleClick" type="text" size="small"
          >查看</el-button
          >
          <template v-if="scope.row.children">
            <el-button type="text" size="small" @click="showDialog('dialog2')"
            >新增下级</el-button
            >
          </template>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import { getCategoryShop } from '@/framework/api/categoryShop/categoryShop';

export default {
  name: "BinaryTree",

  data() {
    return {
      dialogVisible: false,
      dialogTitle: "",
      switchValue: false,
      getShopLists: [],
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          children: [
            {
              id: 31,
              date: "2016-05-01",
              name: "张三",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-01",
              name: "张三",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          children: [
            {
              id: 33,
              date: "2016-05-01",
              name: "马武",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 34,
              date: "2016-05-01",
              name: "马武",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 35,
              date: "2016-05-01",
              name: "张三",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 36,
              date: "2016-05-01",
              name: "张三",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          children: [
            {
              id: 37,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 38,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
      ],
      labelPosition: "right",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.getShopList();
  },

  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSwitchChange() {
      console.log(123);
    },
    headerCellStyle({ column }) {
      if (column.label === "分类名称") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "排序") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "服务费率") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "分类图片") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "是否显示") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "操作") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      }
    },
    showDialog(dialog) {
      if (dialog === "dialog1") {
        this.dialogTitle = "新增";
      } else {
        this.dialogTitle = "新增下级";
      }
      this.dialogVisible = true;
    },
    submitForm() {
      // 提交表单操作
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，可以进行提交操作
          // 可以在这里调用接口等实现具体的提交逻辑
          console.log("表单提交成功");
          this.dialogVisible = false; // 关闭对话框
        } else {
          console.log("表单校验失败");
        }
      });
    },
    //获取数据
    getShopList() {
      getCategoryShop().then((res) => {
        // this.getShopLists = res.data.data;
        console.log(res, "1111");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
</style>
